<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googlefonts.cn/css?family=Hanalei+Fill" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          fontFamily: {
            sans: ['ui-sans-serif', 'system-ui'],
            serif: ['Hanalei Fill', 'Georgia'],
            mono: ['Ma Shan Zheng', 'SFMono-Regular'],
          },
        },
      }
    </script>
    <title>Typography</title>
  </head>
  <body>
    <!-- Font Family -->
    <p class="font-sans">TailWindCss 真的太棒了</p>
    <p class="font-serif">TailWindCss 真的太棒了</p>
    <p class="font-mono">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Font Size -->
    <p class="text-xs text-red-400">TailWindCss 真的太棒了</p>
    <p class="text-sm text-orange-400">TailWindCss 真的太棒了</p>
    <p class="text-base text-yellow-400">TailWindCss 真的太棒了</p>
    <p class="text-lg text-green-400">TailWindCss 真的太棒了</p>
    <p class="text-xl text-cyan-400">TailWindCss 真的太棒了</p>
    <p class="text-3xl text-blue-400">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Font Weight -->
    <p class="font-light">TailWindCss 真的太棒了</p>
    <p class="font-normal">TailWindCss 真的太棒了</p>
    <p class="font-medium">TailWindCss 真的太棒了</p>
    <p class="font-semibold">TailWindCss 真的太棒了</p>
    <p class="font-bold">TailWindCss 真的太棒了</p>
    <p class="font-black">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Letter Spacing 字间距-->
    <p class="tracking-tighter">TailWindCss 真的太棒了</p>
    <p class="tracking-tight">TailWindCss 真的太棒了</p>
    <p class="tracking-normal">TailWindCss 真的太棒了</p>
    <p class="tracking-wide">TailWindCss 真的太棒了</p>
    <p class="tracking-wider">TailWindCss 真的太棒了</p>
    <p class="tracking-widest">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Text Alignment 文本对齐-->
    <p class="text-left">TailWindCss 真的太棒了</p>
    <p class="text-center">TailWindCss 真的太棒了</p>
    <p class="text-right">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Text Decoration 下划线颜色与粗细-->
    <p class="underline decoration-4 decoration-cyan-400">TailWindCss 真的太棒了</p>
    <p class="underline decoration-8 decoration-pink-400">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Decoration Style 下划线样式-->
    <p class="underline decoration-solid decoration-red-400">TailWindCss 真的太棒了</p>
    <p class="underline decoration-double decoration-4 decoration-orange-400">TailWindCss 真的太棒了</p>
    <p class="underline decoration-dotted decoration-4 decoration-yellow-400">TailWindCss 真的太棒了</p>
    <p class="underline decoration-dashed decoration-4 decoration-green-400">TailWindCss 真的太棒了</p>
    <p class="underline decoration-wavy decoration-4 decoration-cyan-400">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Decoration Offset -->
    <p class="underline decoration-red-500 underline-offset-0">TailWindCss 真的太棒了</p>
    <p class="underline decoration-blue-500 underline-offset-4">TailWindCss 真的太棒了</p>
    <p class="underline decoration-purple-500 underline-offset-8">TailWindCss 真的太棒了</p>
    <hr />
    <!-- Text Transform 文本大小写转换-->
    <p class="nomal-case">tailwindcss 真的太棒了</p>
    <p class="uppercase">tailwindcss 真的太棒了</p>
    <p class="lowercase">tailwindcss 真的太棒了</p>
    <p class="capitalize">tailwindcss 真的太棒了</p>
  </body>
</html>

<!-- Font Family
  font-sans	
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  font-serif	
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  
  font-mono	
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

-->

<!-- 
  Font Size
  text-xs	    font-size: 0.75rem; /* 12px */
  text-sm	    font-size: 0.875rem; /* 14px */
  text-base	  font-size: 1rem; /* 16px */
  text-lg	    font-size: 1.125rem; /* 18px */
  text-xl	    font-size: 1.25rem; /* 20px */
  text-2xl	  font-size: 1.5rem; /* 24px */
  text-3xl	  font-size: 1.875rem; /* 30px */
  text-4xl	  font-size: 2.25rem; /* 36px */
  text-5xl	  font-size: 3rem; /* 48px */
  text-6xl	  font-size: 3.75rem; /* 60px */
  text-7xl	  font-size: 4.5rem; /* 7 2px */
  text-8xl	  font-size: 6rem; /* 96px */
  text-9xl	  font-size: 8rem; /* 128px */ 
-->

<!-- Font Weight
  font-thin	      font-weight: 100;
  font-extralight	font-weight: 200;
  font-light	    font-weight: 300;
  font-normal	    font-weight: 400;
  font-medium	    font-weight: 500;
  font-semibold	  font-weight: 600;
  font-bold	      font-weight: 700;
  font-extrabold	font-weight: 800;
  font-black	    font-weight: 900;
-->

<!-- Letter Spacing
  tracking-tighter	letter-spacing: -0.05em;
  tracking-tight	  letter-spacing: -0.025em;
  tracking-normal	  letter-spacing: 0em;
  tracking-wide	    letter-spacing: 0.025em;
  tracking-wider	  letter-spacing: 0.05em;
  tracking-widest	  letter-spacing: 0.1em;
-->

<!-- Text Alignment
  text-left	    text-align: left;
  text-center	  text-align: center;
  text-right	  text-align: right;
  text-justify	text-align: justify;
 -->

<!-- Text Decoration
  decoration-auto	      text-decoration-thickness: auto;
  decoration-from-font	text-decoration-thickness: from-font;
  decoration-0	        text-decoration-thickness: 0px;
  decoration-1	        text-decoration-thickness: 1px;
  decoration-2	        text-decoration-thickness: 2px;
  decoration-4	        text-decoration-thickness: 4px;
  decoration-8	        text-decoration-thickness: 8px;
-->
<!-- Decoration Style 
  decoration-solid	    text-decoration-style: solid;
  decoration-double	    text-decoration-style: double;
  decoration-dotted	    text-decoration-style: dotted;
  decoration-dashed	    text-decoration-style: dashed;
  decoration-wavy	      text-decoration-style: wavy;
-->
<!-- Text Transform
  uppercase	  text-transform: uppercase;
  lowercase	  text-transform: lowercase;
  capitalize	text-transform: capitalize;
  normal-case	text-transform: none;
-->
